<template>
	<view class="container">
		<view class="warp u-m-t-20">

			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="名称" label-width="200" prop="name">
					<u-input :border="border" placeholder="请输入" v-model="form.name" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30"  label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团长地域" prop="leaderArea">
					<!-- <u-input type="select" :select-open="selectShowQydz" v-model="form.leaderArea" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydz = true"></u-input> -->
					  <view style="width:100%;text-align: right;" @click="cityActive1 = true">{{form.leaderArea || "请选择"}}</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30"  label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团队类型" prop="teamType">
					<view style="width:100%;text-align: right;" @click="choooseType">{{form.teamType || "请选择"}}</view>				
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30"  label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="团队数量" prop="num">
					<u-input :border="border" type="number" v-model="form.num" placeholder="请输入" placeholderStyle="color: #0D1D36;"
					 input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="诚信保证金" label-width="400" prop="zsbzj">
					<u-radio-group v-model="form.zsbzj" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio shape="square" v-model="item.checked" v-for="(item, index) in checkboxListTwo" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="zsbzj" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="integrityDeposit">
					<u-input :border="border" placeholder="请输入保证金金额  元" v-model="form.integrityDeposit" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item v-if="showBondTip" style="padding-top:0;" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="xmbs">
					<view style="width:100%;color: #9da2b0;padding-bottom:5rpx;text-align: right;">无保证金，将可能增加合作风险，请慎重</view>
				</u-form-item>
				<u-form-item class="group" :required="required" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="模式" prop="iam">
					<view style="width:100%;text-align: right;" @click="showMode = true">{{form.mode || "请选择"}}</view>
					<u-picker mode="selector" v-model="showMode" @confirm="function(e){return confirm(e,selectMode,'mode')}" :range="selectMode"
					 range-key="name"></u-picker>

				</u-form-item>
				<view v-if="form.mode == '企业合作'" class="">
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="类别" prop="lb">
						<u-input :border="border" type="select" v-model="form.lb" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="地域" prop="region">
					 <view style="width:100%;text-align: right;" @click="cityActive = true">{{form.region || "请选择"}}</view>
						<!-- <u-input type="select" :select-open="selectShowDy" v-model="form.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowDy = true"></u-input> -->

					</u-form-item>
				</view>
				<view v-if="form.mode == '服务合作'" class="">
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="类别" prop="lb">
						<view style="width:100%;text-align: right;" @click="mSelect">{{form.lb || "请选择"}}</view>
						
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="服务内容" prop="fwnr">
						<u-input :border="border" type="select" :select-open="selectShowFwnr" v-model="form.fwnr" placeholder="请选择"
						 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowFwnr = true"></u-input>
					</u-form-item>
				</view>
				<view v-if="form.mode == '融资合作'" class="">
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="项目地域" prop="region">
						<!-- <u-input type="select" :select-open="selectShowDy" v-model="form.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowDy = true"></u-input> -->
						 <view style="width:100%;text-align: right;" @click="cityActive = true">{{form.region || "请选择"}}</view>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="项目类别" prop="lb">
						<!-- <u-input :border="border" type="select" :select-open="selectShowXmlb" v-model="form.lb" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowXmlb = true"></u-input> -->
						<!-- 	 <picker class="item-picker" style="width:100%;text-align: right;color: #4B9CFF;" v-model="form.lb" mode="multiSelector"
						  range-key="name" @change="classifyChange" @columnchange="columnchange" :value="classifyIndex" :range="fetchDict.financing_cooperation_project_category">
						 	<view>{{ name }}</view>
						 </picker> -->

						<view style="width:100%;text-align: right;" @click="mSelect">{{form.lb || "请选择"}}</view>

						<TriTree ref="triTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return setChooseType(e,'lb')}"></TriTree>
					</u-form-item>

					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="用地面积" prop="ydmj">
						<u-input :border="border" placeholder="请输入  亩" v-model="form.ydmj" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="建筑面积" prop="jzmj">
						<u-input :border="border" placeholder="请输入" v-model="form.jzmj" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="进展阶段" prop="jzjd">
						<u-input :border="border" type="select" :select-open="selectShowJzjd" v-model="form.jzjd" placeholder="请选择"
						 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowJzjd = true"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="融资规模" prop="rzgm">
						<u-input :border="border" placeholder="请输入" v-model="form.rzgm" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="融资方式" prop="rzfs">
						<u-input :border="border" type="select" :select-open="selectShowRzfs" v-model="form.rzfs" placeholder="请选择"
						 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowRzfs = true"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="时间安排" prop="sjap">
						<u-input :border="border" @click="show = true" placeholder="请选择" placeholderStyle="color: #0D1D36;" v-model="form.sjap"
						 type="text" input-align="right"></u-input>
						<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>

					</u-form-item>
				</view>

				<u-gap :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">简短说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="jdsm">
					<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="form.jdsm" />
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">

			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="fetchDict.service_content" v-model="selectShowFwnr" @confirm="selectConfirmFwnr"></u-select>
			<u-select mode="single-column" :list="fetchDict.progress_stage" v-model="selectShowJzjd" @confirm="selectConfirmJzjd"></u-select>
			<u-select mode="single-column" :list="fetchDict.financing_mode" v-model="selectShowRzfs" @confirm="selectConfirmRzfs"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			 <TriTree ref="triTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return psetChooseType(e,'lb')}"></TriTree>
			 	<u-select :default-value="defaultValue" v-model="selectShowQydz" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity1"></u-select>
				<TriTree ref="tri1Tree" :range="fetchDict.group_type" confirmColor="rgb(41, 121, 255)"
				@confirm="function (e){return setChooseType(e,'teamType')}"></TriTree>	
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<city-select v-model="cityActive1" @city-change="cityChange1"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue'
	export default {
		components: {
			citySelect,
			TriTree
		},
		data() {
			let that = this;
			return {
				cityActive1:false,
				cityActive: false,
				selectShowQydz: false,
				dataSource: [{
					id: 1,
					name: '个人',
					child: []
				}],
				zsbzj:false,
				showBondTip:false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				checkboxListTwo: [
					{
						name: '需要',
						checked: false,
						disabled: false
					},
					{
						name: '不需要',
						checked: false,
						disabled: false
					},
				],
				name: '请选择',
				classifyArr: [
					[],
					[]
				], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引

				childArr: [], // 二级分类数据源
				selectIam: ['个人', '团队'],
				showIam: false,
				showineed: false,
				selectineed: ['旅游活动', '体育活动'],
				showMode: false,
				selectMode: ["融资合作", "企业合作", "服务合作"],
				fetchDict: [],
				defaultValue: [3],
				defaultValue1: [2],
				listCitys: [],
				listXmlbs: [],
				show: false,
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				pattern: '',
				/**
				 * form验证
				 * */
				 model: {
				 	demand: {}
				},
				form: {},
				startTime: '',
				endTime: '',
				rules: {},
				checkboxList: [{
						name: '企业',
						checked: false,
						disabled: false
					},
					{
						name: '团队',
						checked: false,
						disabled: false
					},
					{
						name: '无',
						checked: false,
						disabled: false
					},
				],
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowDy: false,
				selectShowFwnr: false,
				selectShowXmlb: false,
				selectShowJzjd: false,
				selectShowRzfs: false,
				selectShowLyxy: false,
				selectShowPpsx: false,
				radio: '',
				radio1: '',
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {},
		onShow() {
			// this.wsDictionary();
			// this.wxyDictionary();
			// this.wyxDictionary();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.data) {
				this.model = JSON.parse(decodeURIComponent(options.data));
			}
			this.form.mode = "融资合作";
			//获取省市区
			this.cityList();
			var keys = {'keys':['group_type','service_content','progress_stage','financing_mode','financing_cooperation_project_category']}
			this.dictionaryFetchDict(keys);
		},
		methods: {				
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.region = address
			},			
			cityChange1(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.form.leaderArea = address
			},
			choooseType(){
				this.$refs.tri1Tree._show() 
			},
			psetChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()
			},
			setChooseType(item, type){					
				var column_array=this.$mUtils.array_column(item,'label');
				var modelValue=column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()	
			},
			mSelect() {
				this.$refs.triTree._show()
			},
			// 获取数据源并分出一级二级
			getAllClassify() {
				let dataLen = this.dataSource.length;
				if (dataLen !== 0) {
					for (let i = 0; i < dataLen; i++) {
						// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
						this.childArr.push(this.dataSource[i].child)
					};

					// 一级分类的数据源
					this.classifyArr[0] = this.dataSource;

					// 第一次打开时，默认给一级分类添加它的二级分类
					this.classifyArr[1] = this.childArr[0]
				}
			},
			// 选择商品分类
			classifyChange(e) {
				let value = e.target.value;
				this.classifyIndex = value;

				if (this.classifyArr[0].length != 0) {
					this.name = this.classifyArr[0][this.classifyIndex[0]].name
				};

				if (this.classifyArr[1].length != 0) {
					this.name += ',' + this.classifyArr[1][this.classifyIndex[1]].name
				}
			},

			// 获取二级分类
			columnchange(e) {
				console.log('childArr', e);
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {

					// 在小程序中直接赋值无效  H5 可直接赋值
					this.classifyArr[1] = this.childArr[e.detail.value]


					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					// this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
					// #endif
				}
			},
			confirm(e, list, type) {
				var itemKey = e[0];
				this.form[type] = list[itemKey];
				if (this.form[type] == '企业合作') {
					this.form.lb = "企业联合体合作";
				} else if (this.model[type] == '服务合作') {
					this.form.lb = "企业工程服务合作";
				}
			},
			handleClickWeight(e) {
				var model = encodeURIComponent(JSON.stringify(this.model));
				let url = encodeURIComponent(JSON.stringify("release/bidding"));
				if (this.model.wyx == '企业') {
					uni.navigateTo({
						url: '../user/companyWeight?type=' + url + '&row=' + model
					})
				} else if (this.model.wyx == '团队') {
					uni.navigateTo({
						url: '../user/teamWeight?type=' + url + '&row=' + model
					})
				} else {
					uni.navigateTo({
						url: '../user/personWeight?type=' + url + '&row=' + model
					})
				}
			},
			confirmCity(e) {
				this.form.region = '';
				e.map((val, index) => {
					this.form.region += this.form.region == '' ? val.label : '-' + val.label;
				})
			},			
			confirmCity1(e) {
				this.form.leaderArea = '';
				e.map((val, index) => {
					this.form.leaderArea += this.form.leaderArea == '' ? val.label : '-' + val.label;
				})
			},
			confirmXmlb(e) {
				this.form.lb = '';
				e.map((val, index) => {
					this.form.lb += this.form.lb == '' ? val.label : '-' + val.label;
				})
			},
			async cityList() {
			let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			// checkbox选择发生变化
			checkboxGroupChange(e) {
				if(e==="需要"){
					this.zsbzj = true;
					this.showBondTip = false;
				}else{
					this.showBondTip = true;
					this.zsbzj = false;
				}
				
			},
			// checkbox选择发生变化
			checkboxGroupChange1(e) {
				this.form.xhm = e;
				if (e === "是") {
					this.form.xhmTwo = 1;
				} else {
					this.form.xhmTwo = 0;
				}
			},
			submit() {
				if(this.zsbzj && this.form.integrityDeposit === undefined){
					uni.showToast({
						title:"请输入诚信保证金",
						icon:'none'
					})
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.model.demand = this.form;
						var model = encodeURIComponent(JSON.stringify(this.model));
						var type = this.pattern
						uni.navigateTo({
							url: '/pages/wisdomcommune/zhihuiTeam?pattern=' + type + '&data=' + model
						})
						// this.insertProject();
						// this.matching();
					} else {
						console.log('验证失败');
					}
				});

			},
			
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmFwnr(e) {
				this.form.fwnr = '';
				e.map((val, index) => {
					this.form.fwnr += this.form.fwnr == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmJzjd(e) {
				this.form.jzjd = '';
				e.map((val, index) => {
					this.form.jzjd += this.form.jzjd == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmRzfs(e) {
				this.form.rzfs = '';
				e.map((val, index) => {
					this.form.rzfs += this.form.rzfs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQylx(e) {
				this.form.qylx = '';
				e.map((val, index) => {
					this.form.qylx += this.form.qylx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydy(e) {
				this.form.qydy = '';
				e.map((val, index) => {
					this.form.qydy += this.form.qydy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.form.ppsx = '';
				e.map((val, index) => {
					this.form.ppsx += this.form.ppsx == '' ? val.label : '-' + val.label;
				});
			},
			change(e) {
				if (this.mode == 'range') {
					this.form.sjap = e.startDate + " - " + e.endDate;
					this.startTime = e.startDate;
					this.endTime = e.endDate;
				} else {
					this.form.sjap = e.result;
				}
			},
			changeDate(e) {
				this.form.ppsx = e.result;
			},

			dianji() {
				this.show = true;
			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
